<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户信息添加</title>
<!-- 导入JQuery的资源文件 -->
<script type="text/javascript"
	src="${basePath }static/JQuery1.12.4/jquery1.12.4.min.js"></script>
<!-- 导入bootstrap的资源文件 -->
<link rel="stylesheet"
	href="${basePath }static/bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>
<link rel="stylesheet"
	href="${basePath }static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"></link>
<script type="text/javascript"
	src="${basePath }static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 第三方的日历插件 -->	
<script type="text/javascript" src="${basePath }static/My97DatePicker/WdatePicker.js"></script>
<!-- ajax显示数据 -->
<script type="text/javascript">
	//自动执行以下代码
	// 在浏览器加载该页面是就执行该方法
	$(function() {//等待dom元素加载完毕,类似window.onload;
		// 浏览器加载完成以后会执行以下代码
		console.info("modify here");
		ajaxShowData();
	});

	/**
	   使用ajax查询数据并进行显示操作
	 */
	function ajaxShowData() {
		// 使用jquery的ajax函数获取服务器的数据，并进行回调显示
		$.ajax({
			type : "POST", // 等价于form的method属性
			url : "${basePath}UserInfoModifyQueryServlet", //请求的服务器url地址；等价于form表单的 action属性
			data : "uid=${uid}", // 发送的数据
			dataType : "json", // 返回给ajax引擎的数据类型[返回的是json对象类型，如果不设置，则默认返回的是字符串类型]
			success : function(data) { // ajax引擎的回调函数，其中data就是服务器respon返回的数据，用于使用获取的数据更新页面
				console.info("Data Saved: ");
				console.info(data);
				// 解析json对象数据并进行显示
				if(data){
					// 将结果显示到修改页面上
					$("#txtUserName").val(data.userName);
					$("#txtUserPsw").val(data.userPsw);
					$("#txtUserRealName").val(data.userRealName);
					$("#txtUserEmail").val(data.userEmail);
					$("#txtUserRegisterDate").val(data.userRegisterDate);
				}				
			}
		});
	}
</script>
</head>
<body>
	<form class="form-horizontal" action="${basePath }UserInfoAddServlet" method="post">
		<div class="form-group">
			<input type="hidden" id="txtUserId" name="txtUserId" value="${uid}">
		</div>
		<div class="form-group">
			<label for="txtUserName" class="col-sm-2 control-label">用户名</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="txtUserName" name="txtUserName"
					placeholder="请输入用户名">
			</div>
			<label for="txtUserPsw" class="col-sm-2 control-label">密码</label>
			<div class="col-sm-4">
				<input type="password" class="form-control" id="txtUserPsw" name="txtUserPsw"
					placeholder="请输入密码">
			</div>
		</div>
		<div class="form-group">
			<label for="txtUserRealName" class="col-sm-2 control-label">真实姓名</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="txtUserRealName" name="txtUserRealName"
					placeholder="请输入真实姓名">
			</div>
			<label for="txtUserEmail" class="col-sm-2 control-label">邮箱</label>
			<div class="col-sm-4">
				<input type="email" class="form-control" id="txtUserEmail" name="txtUserEmail"
					placeholder="请输入邮箱">
			</div>
		</div>
		<div class="form-group">
			<label for="txtUserRegisterDate" class="col-sm-2 control-label">注册日期</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="txtUserRegisterDate" name="txtUserRegisterDate"
					placeholder="请输入注册日期" onClick="WdatePicker()">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-4 col-sm-2">
				<button type="submit" class="btn btn-default">修改</button>
			</div>
			<div class="col-sm-offset-1 col-sm-2">
				<button type="reset" class="btn btn-default">重置</button>
			</div>
		</div>
	</form>
</body>
</html>